<template>
  <div class="page-box">
    <a-pagination v-model:current="current" v-model:pageSize="pagesize" show-size-changer :total="props.total" />
  </div>
</template>
<script setup>
// import { watch } from 'fs'
import { ref, defineEmits, defineProps, computed, watch } from 'vue'

const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  current: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  }
})
// const current = ref(props.current)
const emits = defineEmits(['change', 'update:current', 'update:page-size'])
const current = computed({
  get() {
    return props.current
  },
  set(val) {
    // console.log('过户擦', val);

    emits('update:current', val)
  }
})

const pagesize = computed({
  get() {
    return props.pageSize

  },
  set(val) {
    console.log(11111111, val);

    emits('update:page-size', val)
  }
})

watch(() => current.value,
  (newV) => {
    emits('change')
  }
)

watch(() => pagesize.value,
  (newV) => {
    console.log('监听 ');
    if (current.value != 1) {
      // emits('change')
      current.value = 1
    } else {
      emits('change', null)
    }
  }
)



</script>
<style lang="less" scoped>
.page-box {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
